<!--
 * @Author: your name
 * @Date: 2022-01-18 00:06:10
 * @LastEditTime: 2022-01-19 16:04:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\CovData\CovData.vue
-->
<template>
  <div class="num">
      <div class="content">
          <div class="title">截至{{ covDate.modifyTime | time   }}全国数据统计</div>
          <ul class="wrap">
               <!-- /**
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数

              modifyTime 时间
             
             */ -->
              <li>
                  <div class="number">
                        <span>较昨日</span>{{ covDate.currentConfirmedIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.currentConfirmedCount | division }}</div>
                  <strong>现存确诊</strong>
              </li>
              <li>
                  <div class="number">
                        <span>较昨日</span>{{covDate.suspectedIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.suspectedCount | division  }}</div>
                  <strong>境外输入</strong>
              </li>
              <li>
                  <div class="number">
                        <span>较昨日</span>{{ covDate.seriousIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.seriousCount | division  }}</div>
                  <strong>现存无症状</strong>
              </li>
              <li>
                  <div class="number">
                        <span>较昨日</span>{{ covDate.confirmedIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.confirmedCount | division }}</div>
                  <strong>累计确诊</strong>
              </li>
              <li>
                  <div class="number">
                        <span>较昨日</span>{{ covDate.deadIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.deadCount | division }}</div>
                  <strong>累计死亡</strong>
              </li>
              <li>
                  <div class="number">
                        <span>较昨日</span>{{ covDate.curedIncr | numDate }}
                        
                    </div>
                  <div class="bold">{{ covDate.curedCount | division }}</div>
                  <strong>累计治愈</strong>
              </li>
          </ul>
      </div>
      
  </div>
</template>

<script>
export default {
    name:'CovData',
    props:['covDate'],
    filters:{
        //处理时间
        time:function(time){
            return new Date(time).toLocaleString('chinese',{hour12:false})
        },
        //js 中数字加逗号处理(每三位加逗号)
          division: function (num) {
          if (num == undefined) return "";
          
          return num.toLocaleString();
          
          },
       
        numDate:function(num){
          if (num > 0 && num != 0) {
            return "+" + num
          }else{
            return '' + num
          }
        }
     }        
}
</script>

<style>
.num{
    background: #f5f5f5;
    padding-top: 0.2rem;

}
.content{
    background: #fff;
    padding: 0.2rem;
    min-height: 2rem;
    border-radius: 0.2rem 0.2rem 0 0;
}
.title{
    color: #666;
    margin-bottom: 0.2rem;
}
.wrap{
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.2rem;
    /* 盒子阴影 */
    box-shadow: 0 0 3px 2px rgba(194, 192, 192, 0.2);
}
.wrap li{
    width: 33.33333%;
    text-align: center;
    margin-bottom: 0.2rem;
    color: #666;
     
}
.wrap li strong{
    color: black;
}
    .number    span {
          color: #777;
          font-weight: bold;
        }
      
    .number  strong {
        color: #333;
      }


/* 六个标签内的样式 */
    li::after {
      content: "";
      display: block;
      position: absolute;
      right: 1px;
      top: 0.2rem;
      height: 0.8rem;
      border-right: 1px solid #eee;
    }
    li:nth-child(3n)::after {
      content: "";
      border-right: 0;
    }
    .bold {
      font-weight: bold;
      font-size: 0.36rem;
    }
    li:nth-child(1) {
      color: red;
    }
    li:nth-child(2) {
      color: rgb(18, 143, 14);
    }
    li:nth-child(3) {
      color: orange;
    }
    li:nth-child(4) {
      color: rgb(189, 19, 98);
    }
    li:nth-child(5) {
      color: rgb(223, 208, 7);
    }
    li:nth-child(6) {
      color: rgb(8, 110, 194);
    }

</style>
